<template>
  <!-- <el-card> -->
    <!-- <template #header>
      <div class="u619_div">
        <span>优秀作品库</span>
      </div>
    </template> -->
    <el-card class="!border-none" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-16px]"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item>
          <el-input
            v-model="queryParams.id"
            placeholder="作品ID"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <daterange-picker
            placeholder="以创建时间范围筛选"
            v-model:startTime="queryParams.created_start_date"
            v-model:endTime="queryParams.created_end_date"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">
            <div>
              <!-- <span class="search_btn_icon"> </span> -->
              查询
            </div>
          </el-button>
          <el-button @click="resetParams">
            <div>
              <!-- <span class="reset_btn"></span> -->
              重置
            </div>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never">
      <el-table
        stripe
        class="mt-2"
        size="large"
        v-loading="pager.loading"
        :data="pager.lists"
      >
        <el-table-column label="作品ID" prop="id" />
        <el-table-column label="作品预览" min-width="100" prop="describe">
          <template #default="{ row }">
            <el-image :src="row.image_url" />
          </template>
        </el-table-column>
        <el-table-column label="作品类型" prop="type" min-width="100">
          <template #default="{ row }">
            <div>{{ row.type === 1 ? "文生图" : "图生图" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="学号" prop="sn" min-width="120">
          <template #default="{ row }">
            <div>{{ row.user.sn }}</div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="nickname" min-width="120">
          <template #default="{ row }">
            <div>{{ row.user.nickname }}</div>
          </template>
        </el-table-column>
        <el-table-column label="所属院系" prop="college" min-width="120">
          <template #default="{ row }">
            <div>{{ row.user.student?.classes?.college?.name ?? "-" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="所属班级" prop="classes" min-width="120">
          <template #default="{ row }">
            <div>{{ row.user.student?.classes?.name ?? "-" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" min-width="180">
         
        </el-table-column>

        <el-table-column label="操作" min-width="180" fixed="right">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-button 
                plain
                type="primary"
                @click="handleView(row)"
                link
              >
                <!-- <span class="view_btn_icon"> </span> -->
                详情
              </el-button>
              <el-button 
                plain
                type="primary"
                @click="handleDown(row)"
                link
              >
                <!-- <span class="deilt_btn_icon"> </span> -->
                下载
              </el-button>

              <el-button 
              link
                type="danger"
                plain
                @click="handleDelete(row)"
              >
                <!-- <span class="delect_btn_icon"></span> -->
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination
          v-model="pager"
          @change="getLists"
          background="red"
          layout="prev, pager, next, sizes"
        />
      </div>
    </el-card>

    <!-- <AddTeacherModal :open="true" /> -->
    <add-user-pop
      v-if="popShow"
      ref="addUserPopRef"
      @close="popClose"
      :type="popType"
      :selectId="selectId"
    />
  <!-- </el-card> -->
</template>
<script lang="ts" setup name="consumerLists">
import { usePaging } from "@/hooks/usePaging";
import { getPaintRecord, delDepartment } from "@/api/consumer";
import feedback from "@/utils/feedback";
import addUserPop from "../modals/addUserPop.vue";

import dayjs from "dayjs";

const router = useRouter();

//弹框ref
const addUserPopRef = shallowRef();
const popShow = ref(false);

// 弹窗类型
const popType = ref("");

// 当前选中的作品id
const selectId = ref<number>();

const queryParams = reactive({
  id: "",
  created_start_date: "",
  created_end_date: "",
  fine_type: 1, //优秀作品
});

const isSelect = ref<number[]>([]);

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: getPaintRecord,
  params: queryParams,
});

//删除
const handleDelete = async (id: number[] | number) => {
  await feedback.confirm("确定要删除？");
  await delDepartment({ id });
  getLists();
};

// 查看详情
const handleView = async (data: any) => {
  popShow.value = true;
  popType.value = "view";
  selectId.value = data.id;
  await nextTick();
  addUserPopRef.value.open();
};

const handleDown = (_data) => {
  /* 通过url下载 */
  const url = _data?.image_url; // 替换成实际的URL
  const a = document.createElement("a");
  a.target = "_blank";
  a.href = url;
  a.download = "file.png"; // 设置下载后的文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

//弹框关闭
const popClose = () => {
  popShow.value = false;
};

const popConfirm = () => {
  getLists();
  popShow.value = false;
};

onActivated(() => {
  getLists();
});

getLists();

// 路由跳转
const gotoDeatil = () => {
  router.push("/user/student/detail");
};
</script>

<style lang="scss" scoped></style>
